<!-- 拼团提示弹窗（仅弹一次） -->
<template>
	<EPopup
		:value="value"
		@touchmove.stop="stopScrolling"
		:safeAreaInsetBottom="true"
		mode="center"
		:border-radius="24"
		:maskCloseAble="true"
		background="#F8F8FE"
		:closeable="true"
		closeIcon="/static/icon/img_tuan_close@3x.png"
		:closeIconSize="40"
		:customView="true"
	>
		<view class="ll-popup-container">
			<view class="ll-popup-title dfcc">
				<image :src="tandianTime" alt="探店时间" />
				<text>{{ item.exploreTime }}&nbsp;&nbsp;{{ item.exploreTimeScope }}</text>
			</view>
			<view class="ll-popup-invite tac w1">
				再邀请
				<text>{{ Number(item.seekGroupInfo.totalNum) - Number(item.seekGroupInfo.teamer) }}人</text>
				即可拼团成功
			</view>

			<view class="ll-popup-remain tac w1">
				拼团剩余时间 ：
				<countDown
					:timestamp="restTimeStamp"
					:showDays="true"
					:separatorSize="18"
					separatorColor="#ff6b11"
					color="#ff6b11"
					fontSize="20rpx"
					height="24"
					:dayIsZh="true"
					:hideZeroDay="true"
					background="#FDF4EF"
				></countDown>
			</view>

			<!-- <view class="ll-popup-operate dfcc"> -->
			<button open-type="share" class="share-btn ll-popup-operate dfcc">
				<image :src="weChatLogo"></image>
				邀请好友拼团探店
			</button>
			<!-- </view> -->
		</view>
		<!-- <view class="ll-popup-close tac w1">
			<image
				:src="closeBtn"
				@click.stop="
					() => {
						showPop = false;
					}
				"
			></image>
		</view> -->
	</EPopup>
</template>
<script>
import countDown from '@/components/ECountDown/index.vue';
import EPopup from '@/components/EPopup/EPopup';

export default {
	name: 'popup',

	data() {
		return {
			showPop: true,
			restTimeStamp: 0
		};
	},
	components: {
		countDown,
		EPopup
	},
	props: {
		value: {
			type: String,
			default: ''
		},
		item: {
			default: {}
		}
	},
	watch: {
		value(newVal) {
			if (newVal == 'show') {
				this.showPop = true;
			}
		},
		item: {
			handler(newTime) {
				const { seekGroupInfo } = newTime;
				this.restTimeStamp = seekGroupInfo.groupTimeLength / 1000;
			},
			deep: true
		}
	},
	computed: {
		tandianTime() {
			return require('@/static/images/order/img_tc_time.png');
		},
		weChatLogo() {
			return require('@/static/images/order/icon_tc_wechat.png');
		},
		closeBtn() {
			return require('@/static/images/order/icon_tc_close.png');
		}
	},
	// 分享邀请拼团
	onShareAppMessage() {
		this.$emit('onShare');
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/common.scss';
.ll-popup {
	// padding: 160rpx 20rpx 0;
	@include Db_iosBottomDistance(120rpx);
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.6);

	&-container {
		width: 606rpx;
		height: 690rpx;
		margin: 0 auto;
		background-image: url('@/static/images/order/img_invitationPop_bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
		padding: 248rpx 52rpx 48rpx;
	}
	&-title {
		margin-bottom: 50rpx;
		image {
			width: 120rpx;
			height: 28rpx;
			margin-right: 20rpx;
		}
		text {
			width: 328rpx;
			height: 28rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 28rpx;
		}
	}
	&-invite {
		margin-bottom: 80rpx;
		width: 382rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
		text {
			color: #766df7;
		}
	}

	&-remain {
		width: 144rpx;
		height: 32rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ff6b11;
		line-height: 32rpx;
		margin-bottom: 40rpx;
		text {
			width: 40rpx;
			height: 36rpx;
			background: #fdf4ef;
			border-radius: 4rpx;
			margin: 0 4rpx;
		}
	}

	&-operate {
		width: 502rpx;
		height: 84rpx;

		background: linear-gradient(311deg, #8266ff 0%, #5359ff 100%);
		border-radius: 24rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffffff;
		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 16rpx;
		}
		text {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
	&-close {
		margin-top: 32rpx;

		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 16rpx;
		}
	}
}
.dfcc {
	display: flex;
	justify-content: center;
	align-items: center;
}
.df {
	display: flex;
}
.jutc {
	justify-content: center;
}

.alic {
	align-items: center;
}

.tac {
	text-align: center;
}
.w1 {
	width: 100%;
}

.h1 {
	height: 100%;
}
</style>
